<template>
  <div class="pm20">
    <n-tabs class="dfgdfgdfr" type="line" animated :default-value="dfdsfdst">
      <n-tab-pane name="fdfa" tab="步骤一">
        <div class="display-flex">
          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">勘察时间：</div>
              <div class="flex-1">{{ res.InvestigationTime }}</div>
            </div>
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">人流量：</div>
              <div class="flex-1">
                <n-input v-model:value="res.visitorsFlowRate" type="text" />
              </div>
            </div>
          </div>

          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">场地类型：</div>
              <div class="flex-1">
                <n-select v-model:value="res.typeOfSiteSoil" :options="array" />
              </div>
            </div>
          </div>
        </div>

        <div class="display-flex">
          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">有无AED：</div>
              <div class="flex-1">
                <n-radio-group v-model:value="res.isAED" name="aed">
                  <n-space>
                    <n-radio
                      :value="item.val"
                      v-for="item in jjhse"
                      :key="item.val"
                    >
                      {{ item.label }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </div>
            </div>
          </div>
          <div class="flex-1" v-if="res.isAED == 2">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">AED台数：</div>
              <div class="flex-1">
                <n-input v-model:value="res.AEDnumber" type="number" />
              </div>
            </div>

            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">获得方式：</div>
              <div class="flex-1">
                <n-input v-model:value="res.waysObtain" type="text" />
              </div>
            </div>
          </div>
        </div>

        <div class="display-flex">
          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">有无接受过培训：</div>
              <div class="flex-1">
                <n-radio-group v-model:value="res.isnumberTrainers" name="aed">
                  <n-space>
                    <n-radio
                      :value="item.val"
                      v-for="item in jjhse"
                      :key="item.val"
                    >
                      {{ item.label }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </div>
            </div>
          </div>
          <div class="flex-1" v-if="res.isnumberTrainers == 2">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">培训人数：</div>
              <div class="flex-1">
                <n-input v-model:value="res.numberTrainers" type="number" />
              </div>
            </div>

            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">获得培训的方式：</div>
              <div class="flex-1">
                <n-input v-model:value="res.trainingMethod" type="text" />
              </div>
            </div>
          </div>
        </div>

        <div class="display-flex">
          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">有无发生过意外情况：</div>
              <div class="flex-1">
                <n-radio-group v-model:value="res.isfortuitousEvent" name="aed">
                  <n-space>
                    <n-radio
                      :value="item.val"
                      v-for="item in jjhse"
                      :key="item.val"
                    >
                      {{ item.label }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </div>
            </div>
          </div>
          <div class="flex-1" v-if="res.isfortuitousEvent == 2">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">意外情况：</div>
              <div class="flex-1">
                <n-input v-model:value="res.fortuitousEvent" type="text" />
              </div>
            </div>
          </div>
        </div>

        <div class="display-flex">
          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">现场联系人：</div>
              <div class="flex-1">
                <n-input v-model:value="res.VenueContactPerson" type="text" />
              </div>
            </div>

            <!-- <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">备注：</div>
              <div class="flex-1">{{ res.remark }}</div>
            </div> -->
          </div>
          <div class="flex-1">
            <div class="display-flex dsfdsfrtewe">
              <div class="renwu-label">联系方式：</div>
              <div class="flex-1">
                <n-input v-model:value="res.contactway" type="text" />
              </div>
            </div>
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane name="fdfb" tab="步骤二">
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">介绍黄金4分钟：</div>
          <div class="flex-1">
            <n-checkbox v-model:checked="res.IntroducingGoldIn4Minutes"
              >已介绍</n-checkbox
            >
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="">应急救援基础设施体系构建及全员安全技能提升：</div>
          <div class="flex-1">
            <n-checkbox v-model:checked="res.skillupgrading">已介绍</n-checkbox>
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div>根据场所属性介绍落装设备详情（多选）：</div>
          <div class="flex-1">
            <n-checkbox-group v-model:value="res.DeviceDetails">
              <n-space>
                <p>
                  <n-checkbox value="1" label="消防宣教一体机+便民充电宝" />
                </p>
                <p>
                  <n-checkbox value="2" label="AED智能售卖机（友宝）" />
                </p>
                <p>
                  <n-checkbox value="3" label="AED智能售卖机（友宝）" />
                </p>
                <p>
                  <n-checkbox value="4" label="消防宣教一体机（壁挂式）" />
                </p>
              </n-space>
            </n-checkbox-group>
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="">沟通场地方接电和签协议：</div>
          <div class="flex-1">
            <n-checkbox v-model:checked="res.CommunicateAndSignAgreements"
              >已沟通</n-checkbox
            >
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane name="fdfc" tab="步骤三">
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">选址拍照：</div>
          <div class="flex-1">
            <n-checkbox v-model:checked="res.LocationPhoto">已完成</n-checkbox>
          </div>
        </div>

        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">预选点位数量:</div>
          <div class="flex-1">
            <n-input v-model:value="res.PointNumber" type="text" />
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane name="fdfd" tab="步骤四" class="kjndfsdrerre">
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">预选点位数量:</div>
          <div class="flex-1">{{ res.PointNumber }}</div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">安装点位数量:</div>
          <div class="flex-1">{{ jhhse() }}</div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">宣教一体机+便民充电宝个数:</div>
          <div class="flex-1">
            <n-input
              v-model:value="res.ConvenientChargingTreasure"
              type="text"
            />
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">宣教一体机（壁挂式）个数:</div>
          <div class="flex-1">
            <n-input v-model:value="res.wallMounted" type="text" />
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">AED智能售卖机（友宝）个数:</div>
          <div class="flex-1">
            <n-input v-model:value="res.FriendsTreasure" type="text" />
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">请输入AED智能取餐柜（饿了么）个数:</div>
          <div class="flex-1">
            <n-input v-model:value="res.EleMe" type="text" />
          </div>
        </div>

        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">丝印备注:</div>
          <div class="flex-1">
            <n-select
              v-model:value="res.ScreenPrintingNote"
              :options="arrayer"
            />
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe mt20">
          <div class="renwu-label">pdf格式:</div>
          <div class="sz cen">
            <img src="../../../../assets/img/pdf.png" class="dsfsdrtr" />
            <div class="ls display-flex">
              <n-button
                quaternary
                type="success"
                @click="openPdf(res.pdfurl)"
                v-if="res.pdfurl"
              >
                点击查看pdf</n-button
              >
              <div class="kkmmseerrw ml20">
                <n-upload
                  :action="prefixS + 'public/Upimg'"
                  :data="upload"
                  accept=".pdf"
                  @Finish="getImgs"
                  @before-upload="appload = true"
                >
                  <n-button quaternary type="success" :loading="appload">
                    点击重新上传</n-button
                  >
                </n-upload>
              </div>
            </div>
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane name="fdfe" tab="步骤五">
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">发送电子版协议:</div>
          <div class="flex-1">
            <n-checkbox v-model:checked="res.SendingElectronicProtocol"
              >已完成</n-checkbox
            >
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">发送落装方案:</div>
          <div class="flex-1">
            <n-checkbox v-model:checked="res.SendScheme">已完成</n-checkbox>
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">场地确认协议:</div>
          <div class="flex-1">
            <n-radio-group v-model:value="res.SiteAgreement" name="aed">
              <n-space>
                <n-radio
                  :value="item.val"
                  v-for="item in jjhseb"
                  :key="item.val"
                >
                  {{ item.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe" v-if="res.SiteAgreement == 2">
          <div class="renwu-label">待沟通事项:</div>
          <div class="flex-1">
            <n-input v-model:value="res.SiteAgreementText" type="text" />
          </div>
        </div>
        <div class="display-flex dsfdsfrtewe">
          <div class="renwu-label">场地确认方案:</div>
          <div class="flex-1">
            <n-radio-group
              v-model:value="res.SiteConfirmationScheme"
              name="aed"
            >
              <n-space>
                <n-radio
                  :value="item.val"
                  v-for="item in jjhsec"
                  :key="item.val"
                >
                  {{ item.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </div>
        </div>
        <div
          class="display-flex dsfdsfrtewe"
          v-if="res.SiteConfirmationScheme == 2"
        >
          <div class="renwu-label">待沟通事项:</div>
          <div class="flex-1">
            <n-input
              v-model:value="res.SiteConfirmationSchemeText"
              type="text"
            />
          </div>
        </div>
      </n-tab-pane>
    </n-tabs>
    <div class="tr">
      <n-button type="" @click="emit('close')"> 关闭 </n-button>
      <n-button type="primary" class="ml20" @click="xgkc"> 一键保存 </n-button>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { dxget, dxpost, prefixS } from "../../../../util";
import { ref } from "vue";
let props = defineProps({
  axId: { type: String },
  seerert: { type: String },
});
const emit = defineEmits(["close"]);
const dfdsfdst = ref(props.seerert);
const array = ref([]);
const arrayer = ref([]);
const jjnner = ref(false);
const upload = {
  typeName: "pdf",
};
const showModal = ref(true);
const appload = ref(false);
const res = ref({
  InvestigationTime: "",
  visitorsFlowRate: "",
  typeOfSiteSoil: "",
  isAED: 0,
  AEDnumber: "",
  waysObtain: "",
  isnumberTrainers: 0,
  numberTrainers: "",
  trainingMethod: "",
  isfortuitousEvent: 0,
  fortuitousEvent: "",
  VenueContactPerson: "",
  contactway: "",
  pdfurl: "",
  SiteConfirmationSchemeText: "",
  PointNumber: 0,
  IntroducingGoldIn4Minutes: 0,
  skillupgrading: 0,
  CommunicateAndSignAgreements: 0,
  DeviceDetails: "",
  LocationPhoto: 0,
  ConvenientChargingTreasure: "",
  wallMounted: "",
  FriendsTreasure: "",
  EleMe: "",
  SendingElectronicProtocol: 0,
  SendScheme: 0,
  SiteAgreement: 0,
  SiteConfirmationScheme: 0,
  SiteAgreementText: "",
  ScreenPrintingNote: "",
});
const jjhse = [
  {
    label: "无",
    val: 1,
  },
  {
    label: "有",
    val: 2,
  },
];
const jjhseb = [
  {
    label: "确认协议",
    val: 1,
  },
  {
    label: "待沟通",
    val: 2,
  },
];
const jjhsec = [
  {
    label: "确认方案",
    val: 1,
  },
  {
    label: "待沟通调整",
    val: 2,
  },
];
const inits = async () => {
  const { data }: any = await dxget("beRelieved/investigateDetails", {
    id: props.axId,
  });
  res.value = data;
};
const isxz = (text) => {
  let jhhse = false;
  console.log(res.value.DeviceDetails + "--" + text);

  try {
    res.value.DeviceDetails.split(",").filter((a) => a == text)[0]
      ? (jhhse = true)
      : (jhhse = false);
  } catch (e) {
    console.log(e);
  }
  return jhhse;
};
const jhhse = () => {
  const zsl =
    (parseInt(res.value.ConvenientChargingTreasure) || 0) +
    (parseInt(res.value.wallMounted) || 0) +
    (parseInt(res.value.FriendsTreasure) || 0) +
    (parseInt(res.value.EleMe) || 0);
  return zsl;
};
inits();

const openPdf = (pdfurl) => {
  open(pdfurl);
};
const getTypeList = async () => {
  const { data }: any = await dxget("beRelieved/typeOfSiteSoil");
  data.map((a) => {
    array.value.push({
      label: a,
      value: a,
    });
  });
  // array.value = data.split(",");
};

getTypeList();

const getTypeLister = async () => {
  const { data }: any = await dxget("beRelieved/typeOfSiteSoil", {
    id: 18,
  });
  data.map((a) => {
    arrayer.value.push({
      label: a,
      value: a,
    });
  });
};
getTypeLister();

const xgkc = async () => {
  const { errno, data }: any = await dxpost(
    "beRelieved/investigateDetails/ModifySurvey",
    res.value
  );
  if (errno == 0) {
    window.$message.success(data);
    emit("close");
  }
};
const UploadAgain = () => {

};

const getImgs = async (a) => {
  const responseText = JSON.parse(a.event.currentTarget.responseText);
  res.value.pdfurl = responseText.data.imgurl;
  appload.value = false;
  window.$message.success("上传成功");
};
</script>

 <style scoped>
.dsfdsfrtewe {
  line-height: 40px;
}
.renwu-label {
  width: 140px;
  text-align: right;
  margin-right: 20px;
}
.dsfsdrtr {
  width: 80px;
}
.dfgdfgdfr {
  min-height: 500px;
}
.kjndfsdrerre .renwu-label {
  width: 260px;
}
</style>